<template>
	<div id="t">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1" @click="RouterHome">乐天主页</el-menu-item>
			<el-submenu index="2">
				<template slot="title">我的乐天</template>
				<el-menu-item index="2-1">待处理订单</el-menu-item>
				<el-menu-item index="2-2">我的关注</el-menu-item>
				<el-menu-item index="2-3">我的优惠券</el-menu-item>
				<el-submenu index="2-4">
				<template slot="title">客服服务</template>
				<el-menu-item index="2-4-1">帮助中心</el-menu-item>
				<el-menu-item index="2-4-2">企业客服</el-menu-item>
				<el-menu-item index="2-4-3">电话客服</el-menu-item>
				</el-submenu>
			</el-submenu>
			<el-menu-item index="3" @click="RouterLogin">立即登录</el-menu-item>
			<el-menu-item index="4" @click="RouterRegister">免费注册</el-menu-item>
		</el-menu>
		<div class="line"></div>
		
		
	</div>
</template>

<script>
	export default {
	name: 'top',
	data(){
		return {
				activeIndex: '1',
				activeIndex2: '1'
				};
	},
	methods:{
			handleSelect(){
				console.log("aa")
			},
			RouterRegister(){
				this.$router.push('/register').catch(err => {err})
			},
			RouterLogin(){
				this.$router.push('/login')
			},
			RouterHome(){
				this.$router.push('/')
			}
			
			
	},
	props: {
	counter: String
	}
	}
</script>

<style>
	.el-menu{
		
	}
	a{
		text-decoration:none;
	}
	a:link {color: red} /* 未访问的链接 */
	a:visited {color: red} /* 已访问的链接 */
	a:hover {color: darkred} /* 鼠标移动到链接上 */
	a:active {color: darkred}
	li{
		float: right;
		margin-right: 50px;
		list-style-type: none;
	}
	*{
		padding: 0;
		margin: 0;
	}
	#t{
		/* height: 25px; */
		width: 100%;
		background-color:gray;
		
		
	}
</style>
